<template>
  <div class="login">

    <div class="login-form">
      <el-form ref="loginForm" :model="loginForm">
        <div class="login-form-header">
          <img style="width: 75px; height: 75px;float: left;padding-right: 40px;" src="../assets/img/logo.png"
               alt=""/>
          <div class="login-form-text">贰泓影院 - 登录页面</div>
        </div>
        <div style="color: #91949c;font-weight: bolder">
          <el-form-item>
            <p>Username</p>
            <el-input class="login-form-input" v-model="loginForm.username" placeholder="账 号"></el-input>
          </el-form-item>
          <el-form-item>
            <p>Password</p>
            <el-input class="login-form-input" placeholder="密 码" v-model="loginForm.password" show-password></el-input>
          </el-form-item>
          <div style="padding-top: 10px">
            <el-checkbox v-model="loginForm.remember">记住密码</el-checkbox>
            <div style="float: right">
              <el-link href="/forget" style="font-weight: bolder;font-size: 14px;color: #91949c;"
                       :underline="false">
                忘记密码?
              </el-link>
            </div>
        </div>
          <el-form-item>
            <el-button
              class="login-form-button"
              type="primary"
              @click.native.prevent="handleLogin"
              id="TencentCaptcha"
              data-cbfn="callback"
              data-appid="2029163439"
              >
              SIGN IN
            </el-button>
          </el-form-item>
        </div>
      </el-form>

      <div class="login-form-footer">
        <el-link href="/register" style="font-weight: bolder;font-size: 16px;color: #91949c;"
                 :underline="false">
          还没有账号？去注册
          <i style="font-weight: bolder;font-size: 15px" class="el-icon-right"></i>
        </el-link>
      </div>
    </div>
  </div>
</template>

<script>

  import {Login} from "../api/user";
  import Cookies from "js-cookie";
  import { encrypt, decrypt } from '../utils/jsencrypt';
  import config from '../config';
  import {verifyTicker} from "../api/user";



  export default {
    data() {
      return {
        loginForm: {
          username: '',
          password: '',
          remember: false,
        },
        ticket : "",
        randstr : "",
        userIp : ""
      }
    },

    created() {
      console.log(window.location.host)
      if (window.TencentCaptcha === undefined) {
        let script = document.createElement('script')
        let head = document.getElementsByTagName('head')[0]
        script.type = 'text/javascript'
        script.charset = 'UTF-8'
        script.src = 'https://ssl.captcha.qq.com/TCaptcha.js'
        head.appendChild(script)
      }
    },

    methods: {
      postLogin() {
        const LoginData = {
          username: this.loginForm.username,
          password: this.loginForm.password,
          remember: this.loginForm.remember
        };
        Login(LoginData).then(res => {
          localStorage.setItem("uid", res.data.user.id);
          localStorage.setItem("token", res.data.token);
          // this.$router.go(-1);
          this.$router.push({path: '/', replace: true})
        })
      },


      handleLogin() {
        if (this.loginForm.username.length < 6) {
          this.$message({
            message: '请输入不少于6位的用户名',
            type: 'warning'
          });
          return
        }
        if (this.loginForm.password.length < 1) {
          this.$message({
            message: '输入密码不能为空哦',
            type: 'warning'
          });
          return
        }
        this.$refs.loginForm.validate(valid => {
          if (valid) {
            console.log("登录")
            this.loading = true;
            if(window.TencentCaptcha===undefined) console.log("不存在")
            let captcha = new TencentCaptcha('2029163439',(rsp) => {
              // console.log(rsp)
              if (rsp.ret===0) {
                let ticket
                let randstr
                let userIp
                this.$axios({
                  method: 'post',
                  url: config.API_URL +'/user/verifyTicker',
                  data: {
                    ticket : rsp.ticket,
                    randstr : rsp.randstr,
                    userIp : '192.168.56.1'
                  },
                }).then((res) => {
                  console.log("--------")
                  console.log(res)
                })
                this.postLogin();
              }
              else {
                this.loading = false;
              }
            })
            captcha.show()
          }
        });
      },


    }
  }
</script>

<style scoped>

  .login {
    width: 100%;
    height: 100%;
    background: #FFFFFF;
    background-position: left;
    background-size: cover;
    background-image: url("../assets/img/login-bg.png");
  }

  .login-form {
    width: 500px;
    position: absolute;
    left: 65%;
    top: 55%;
    transform: translate(-50%, -60%);
    letter-spacing: 2px;
  }

  .login-form-header {
    height: 10px;
    padding-left: 45px;
    padding-bottom: 80px;
  }

  .login-form-text {
    color: #000000;
    font-weight: bold;
    font-size: 30px;
    padding-top: 15px;
  }

  .login-form-input {
    margin-bottom: 10px;
  }

  .login-form-button {
    border-radius: 3px;
    width: 100%;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 2px;
    height: 60px;
    background: #5a84fd;
    box-shadow: 0 5px 30px rgb(0 66 8.5%);
    margin-top: 35px;
  }

  .login-form-footer {
    font-weight: bolder;
    color: #91949c;
    padding-top: 40px;
    text-align: center;
  }

  >>> .el-input__inner {
    height: 48px;
  }

  .el-checkbox {
    color: #91949c;
    font-weight: bolder;
    font-size: 15px;
  }

  .el-button {
    background-color: #845EC2;
    border: 1px solid #a93ac2;
    color: white;
  }

  .login-form p{
    margin-bottom:2%;
  }
</style>
